<template>
  <div class="page course-share">
    <div class="share-signal" v-if="showShareTips">
      <div class="triangle"></div>
      <p>立即分享</p>
    </div>
    <div class="main-box">
      <share-card
        :type="currentIndex"
        :query="query"
        :data="data"
        v-if="data.title"
        :url="copyUrl"
        @shareImageReady="showShareTips = true"
      ></share-card>
    </div>
    <div class="switch" v-if="currentIndex < 4">
      <div
        class="switch-item"
        :class="{ [`item-${item}`]: true, active: currentIndex === item }"
        v-for="item in 3"
        :key="item"
        @click="currentIndex = item"
      ></div>
    </div>
    <p class="tips">长按海报图保存至相册</p>
  </div>
</template>

<script>
  import ShareCard from '../../components/ShareCard';
  import qs from 'qs';
  export default {
    data() {
      return {
        currentIndex: 1,
        data: {},
        userInfo: {},
        query: {},
        showShareTips: false,
      };
    },
    components: {
      ShareCard,
    },
    computed: {
      copyUrl() {
        const url =
          process.env.NODE_ENV === 'development'
            ? 'https://dev-jimu-h5.movtile.com/jobdetail.html?id=' + this.query.id
            : 'https://jimu-h5.movtile.com/jobdetail.html?id=' + this.query.id;
        return url;
      },
    },
    mounted() {
      const query = window.location.href.split('?')[1];
      if (query) {
        this.query = qs.parse(query);
      }
      this.fetchData();
      this.hideWXShare();
    },
    methods: {
      fetchData() {
        this.$service
          .MallJobDetail({ id: this.query.id })
          .then((res) => {
            this.data = res;
            //处理html2canvas无法显示多余字符省略号
            if (this.data.title.length > 28) {
              this.data.title = this.data.title
                .slice(0, 32)
                .replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, '...');
            }
            if (this.data.user.nickname.length > 12) {
              this.data.user.nickname = this.data.user.nickname
                .slice(0, 14)
                .replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, '...');
            }
            if (this.data.user.profession.length > 15) {
              this.data.user.profession = this.data.user.profession
                .slice(0, 17)
                .replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, '...');
            }
          })
          .catch((err) => {
            this.$appService.toast({ msg: err.message });
          });
      },
      onCopySuccess() {
        this.$Toast('复制成功~分享给好友吧');
      },
      onCopyError() {
        this.$Toast('复制失败，请重试');
      },
      openIntroLink() {
        if (this.$UA.isJM) {
          this.$appService.openLink({ link: `https://ke.movtile.com/article/85?hl=1` });
        } else {
          window.location.href = 'https://ke.movtile.com/article/85?hl=1';
        }
      },
      hideWXShare() {
        function onBridgeReady() {
          WeixinJSBridge.call('hideOptionMenu'); //隐藏微信下的分享菜单
        }
        if (typeof WeixinJSBridge == 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
          }
        } else {
          onBridgeReady();
        }
      },
    },
  };
</script>

<style lang="less">
  .course-share {
    padding: 45px 40px 40px;
    .share-signal {
      position: fixed;
      top: 10px;
      right: 33px;
      transition: all 0.2s;
      animation: shake 1s infinite;
      z-index: 999;
      p {
        width: 200px;
        height: 60px;
        line-height: 60px;
        background: #111111;
        border-radius: 7px;
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
      }
      .triangle {
        width: 0;
        height: 0;
        border-top: 0px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #111111;
        margin-left: 170px;
      }
    }
    .main-box {
      background-color: #eee;
      width: 65rem;
      margin: auto;
      border-radius: 20px;
      margin-bottom: 30px;
      min-height: 1160px;
    }

    .switch {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      .switch-item {
        width: 120px;
        height: 120px;
        background: #ececec;
        border-radius: 7px;
        background: url(../../assets/images/item-1.jpg) 0 0 no-repeat;
        cursor: pointer;
        // border: 5px solid transparent;
        margin-right: 27px;

        &.active {
          &.item-1 {
            border: 5px solid #b59384;
            background-color: #b59384;
          }
          &.item-2 {
            border: 5px solid #6e9f9b;
            background-color: #6e9f9b;
          }
          &.item-3 {
            border: 5px solid #a8aaaa;
            background-color: #a8aaaa;
          }
        }

        &.item-1 {
          background-image: url(../../assets/images/item-1.jpg);
        }

        &.item-2 {
          background-image: url(../../assets/images/item-2.jpg);
        }
        &.item-3 {
          background-image: url(../../assets/images/item-3.jpg);
          margin-right: 0;
        }

        background-size: 100%;
      }
    }

    .tips {
      text-align: center;
      color: #888888;
      font-size: 24px;
    }
    .invite-txt {
      color: #888888;
      font-size: 24px;
      margin: 30px 0;
      text-align: left;
    }
    .copy-btn {
      height: 93px;
      border-radius: 7px;
      margin: 30px auto;
      width: 100%;
      border: none;
      text-align: center;
      background: #2247ff;
      font-weight: 800;
      color: #ffffff;
      font-size: 28px;
    }

    @keyframes shake {
      0% {
        transform: translate(0px, 0px);
      }
      50% {
        transform: translate(0px, -10px);
      }
      100% {
        transform: translate(0px, 0px);
      }
    }
  }
</style>
